import { connect } from 'react-redux'
import TodoList from '../components/TodoList.jsx'
import { toggleTodo } from '@/store/actions'
import { VisibilityFilters } from '@/store/actions'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return todos
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(t=>t.completed)
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(t=>!t.completed)
    default:
      throw new Error('Unknow filter:', filter)
  }
}

const mapStateToProps = state =>{
  console.log('redux state:', state) // {todos: [], visibilityFilter: "SHOW_ALL"}
  return ({
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  })}

const mapDispatchToProps = dispatch => ({
  toggleTodo: id => dispatch(toggleTodo(id))
})

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)